<header class="bg-white shadow-sm">
  <div class="max-w-7xl mx-auto">
    <!-- 顶部信息栏 -->
    <div class="bg-gray-100">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-10">
          <div class="flex items-center space-x-6">
            <span class="text-sm text-gray-500">欢迎来到优品汇商城！</span>
            <% if (locals.user) { %>
              <a href="/user" class="text-sm text-gray-500 hover:text-gray-900">
                <%= user.nickname || user.username %>
              </a>
              <a href="/logout" class="text-sm text-gray-500 hover:text-gray-900">退出</a>
            <% } else { %>
              <a href="/login" class="text-sm text-gray-500 hover:text-gray-900">请登录</a>
              <a href="/register" class="text-sm text-gray-500 hover:text-gray-900">免费注册</a>
            <% } %>
          </div>
          <div class="flex items-center space-x-6">
            <a href="/user/orders" class="text-sm text-gray-500 hover:text-gray-900">我的订单</a>
            <a href="/user/favorites" class="text-sm text-gray-500 hover:text-gray-900">收藏夹</a>
            <a href="/help" class="text-sm text-gray-500 hover:text-gray-900">帮助中心</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 主导航栏 -->
    <div class="px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <!-- Logo -->
        <div class="flex-shrink-0">
          <a href="/" class="flex items-center">
            <img class="h-8 w-auto" src="/images/logo.png" alt="优品汇">
            <span class="ml-2 text-xl font-bold text-gray-900">优品汇商城</span>
          </a>
        </div>

        <!-- 搜索框 -->
        <div class="flex-1 max-w-2xl mx-8">
          <div class="relative">
            <input type="text" 
                   class="w-full pl-4 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-red-500" 
                   placeholder="搜索商品">
            <button class="absolute right-0 top-0 mt-2 mr-3">
              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
              </svg>
            </button>
          </div>
        </div>

        <!-- 购物车 -->
        <div class="flex items-center">
          <a href="/cart" class="group flex items-center">
            <svg class="h-6 w-6 text-gray-400 group-hover:text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
            </svg>
            <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-red-500">购物车</span>
            <% if (locals.cartCount) { %>
              <span class="ml-1 text-xs font-semibold text-red-500">(<%= cartCount %>)</span>
            <% } %>
          </a>
        </div>
      </div>

      <!-- 分类导航 -->
      <div class="border-t border-gray-200">
        <div class="flex h-12">
          <div class="group relative">
            <button class="flex items-center px-4 h-full text-sm font-medium text-gray-700 hover:text-red-500 focus:outline-none">
              <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
              </svg>
              全部商品分类
            </button>
            <!-- 分类下拉菜单 -->
            <div class="hidden group-hover:block absolute z-50 w-48 py-2 bg-white rounded-lg shadow-xl">
              <% if (locals.categories) { %>
                <% categories.forEach(category => { %>
                  <a href="/category/<%= category.id %>" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                    <%= category.name %>
                  </a>
                <% }) %>
              <% } %>
            </div>
          </div>
          <nav class="flex space-x-8 ml-8">
            <a href="/" class="flex items-center text-sm font-medium text-gray-700 hover:text-red-500">首页</a>
            <a href="/new" class="flex items-center text-sm font-medium text-gray-700 hover:text-red-500">新品</a>
            <a href="/hot" class="flex items-center text-sm font-medium text-gray-700 hover:text-red-500">热卖</a>
            <a href="/promotion" class="flex items-center text-sm font-medium text-gray-700 hover:text-red-500">促销</a>
            <a href="/brand" class="flex items-center text-sm font-medium text-gray-700 hover:text-red-500">品牌</a>
          </nav>
        </div>
      </div>
    </div>
  </div>
</header> 